<template>
  <div :class="$style.msgTmp">
    <ContentWrap>
      <div :class="$style.fun">
        <div>
          <div :class="$style.item">
            <span>模板名称</span>
            <el-input v-model="name" clearable placeholder="请输入模板名称" />
          </div>
          <div :class="$style.item">
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </div>
        </div>
        <div class="button-container" :class="$style.item" style="padding-top:0;">
          <Add text="添加" title="添加" @on-refresh="refreshHandle" />
          <Add text="编辑" title="编辑" is-edit :tmp-data="selectedArry[0]" @on-refresh="refreshHandle('onPage')" />
          <Button type="danger" @click="removeHandle">删除</Button>
        </div>
      </div>
      <table-box ref="table" no-request :selected-arry.sync="selectedArry" :other-filters="otherFilters" :table-config="tableConfig" />
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Button from '@/components/Button'
import Add from './components/add'
import { filtersRaw } from '@/utils'
import { deleteMessageTemplate } from '@/api/smsOrEmailTemp'
import { mapGetters } from 'vuex'
export default {
  name: 'EmailTemplate',
  components: {
    ContentWrap,
    Button,
    Add
  },
  data() {
    return {
      name: '', // 模板名称
      selectedArry: [], // 选中项
      // 查询短信
      email: filtersRaw('type', 2, '='),
      otherFilters: [], // 额外查询条件
      tableConfig: {
        interfacePath: '/call-center/api/v1/messageTemplate/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'lastUpdateTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            width: '80',
            align: 'center',
            formatData: v => v.keyIndex + 1
          },
          {
            prop: 'code',
            label: '模板编号'
          },
          {
            prop: 'name',
            label: '模板名称'
          },
          {
            prop: 'content',
            label: '模板内容'
          },
          {
            prop: 'enabled',
            label: '模板状态',
            formatData: v => v.enabled === 1 ? '启用' : '禁用'
          },
          {
            prop: 'enableEditing',
            label: '是否允许编辑',
            formatData: v => v.enableEditing === 1 ? '是' : '否'
          },
          {
            prop: 'groupName',
            label: '使用业务组',
            formatData: v => v.group.map(e => e.groupName).join(',')
          },
          {
            prop: 'masterName',
            label: '模板主人',
            formatData: v => `${v.masterName}(${v.masterId})`
          },
          {
            prop: 'lastUpdateTime',
            label: '最近编辑时间'
          }
        ]
      }
    }
  },
  computed: {
    selfStaffCode() {
      return this.userCache.staffCode
    },
    ...mapGetters(['groupList'])
  },
  created() {
  },
  methods: {
    // 刷新数据
    refreshHandle(onPage) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(onPage)
      })
    },
    // 查询数据
    queryHandle() {
      this.otherFilters = [
        this.email,
        filtersRaw('name', this.name, 'like'),
        filtersRaw('group', this.groupList.map(e => e.groupNo).join(','), 'in')
      ]
      this.refreshHandle()
    },
    // 删除
    removeHandle() {
      if (this.selectedArry.length <= 0) {
        this.$message.error('请选择要删除的行！')
        return
      }
      const row = this.selectedArry[0]

      if (!this.operatePer(row)) {
        this.$message.error('您不能操作该条数据！')
        return
      }
      return this.$confirm('确认删除', {
        type: 'warning',
        title: '删除'
      }).then(() => {
        return deleteMessageTemplate(row.id).then(res => {
          this.selectedArry = []
          this.$message.error('删除成功！')
          this.refreshHandle()
        })
      })
    },
    // 操作权限判断
    operatePer(row) {
      let allow = false
      allow = this.$self(row.masterId)
      if (allow) return allow
      if (row.enableEditing === 1) {
        allow = row.group.some(e => this.$inGroup(e.groupNo))
      }
      return allow
    }
  }
}
</script>
<style lang='scss' module>
@import "@/styles/mixin.scss";
.msgTmp{
  .fun{
    @include flex($justify: space-between);
    // margin-bottom: 16px;
    .item{
      @include flex($dis:inline-flex, $align:center);
      &>span{
        margin-right: 10px;
        display: inline-block;
        flex: 0 0 auto;
      }
    }
    .item + .item{
      margin-left: 10px;
    }
  }
}
</style>
